<template>
	<div class="body">
		<el-row class="navs">
			<el-col :span="4" class="title">
				机构设置
			</el-col>
			<el-col :span="20" class="btns">
				<el-button size="mini" type="primary" @click="addOrg(0)">添加子机构</el-button>
				<el-button size="mini" type="primary" @click="addOrg(1)">添加子部门</el-button>
				<el-button size="mini" type="primary" :disabled="currentRow==null" @click="editOrg()">编辑</el-button>
				<el-button size="mini" type="danger" :disabled="currentRow==null||currentRow.ID==0" @click="delOrg()">删除
				</el-button>
			</el-col>
		</el-row>
		<div class="content">
			<el-tree :data="treeData" :props="defaultProps" current-node-key node-key="ID" show-checkbox
				@node-click="getCurTreeNode">
			</el-tree>

			<el-dialog title="机构信息" :visible.sync="dlg_org">
				<el-form :model="frm_org">
					<el-row>
						<el-col :span="12">
							<el-form-item label="*机构名称" :label-width="frm_lbl_w">
								<el-input ref="OrgName" v-model="frm_org.OrgName" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="机构层级类型" :label-width="frm_lbl_w">
								<el-select v-model="frm_org.OrgLevelType" placeholder="请选择活动区域">
									<el-option label="总部" value="0"></el-option>
									<el-option label="分公司" value="1"></el-option>
									<el-option label="门店" value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="地址" :label-width="frm_lbl_w">
								<el-input v-model="frm_org.Address" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="负责人" :label-width="frm_lbl_w">
								<el-input placeholder="请选择负责人" readonly style="width: 300px;"
									v-model="frm_org.Responsibler_ShowText">
									<el-button slot="append" icon="el-icon-search" @click="innerVisible = true">
									</el-button>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="英文名称" :label-width="frm_lbl_w">
								<el-input v-model="frm_org.EnglishName" style="width: 260px;" autocomplete="off">
								</el-input>
							</el-form-item>
							<el-form-item label="采购价格类型" :label-width="frm_lbl_w">
								<el-select v-model="frm_org.PurchasePriceType" placeholder="请选择采购价格类型">
									<el-option label="1级价" value="0"></el-option>
									<el-option label="1.5级价" value="1"></el-option>
									<el-option label="2级价" value="2"></el-option>
									<el-option label="3级价" value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="邮编" :label-width="frm_lbl_w">
								<el-input v-model="frm_org.ZipCode" style="width: 260px;" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="电话" :label-width="frm_lbl_w">
								<el-input v-model="frm_org.Telephone" style="width: 260px;" autocomplete="off">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dlg_org = false">取 消</el-button>
					<el-button type="primary" @click="addOrgInfo(0)">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog width="50%" title="选择人员" :visible.sync="innerVisible" append-to-body>
				<el-row :gutter="20">
					<el-col :span="6" style="overflow-y: auto;height: 300px;">
						<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
					</el-col>
					<el-col :span="18">
						<el-table :data="tableData" height="250" @row-click="onRowClick" highlight-current-row
							style="width: 100%">
							<el-table-column prop="UserName" label="姓名" width="180">
							</el-table-column>
							<el-table-column prop="DepartmentName" label="所属部门" width="180">
							</el-table-column>
							<el-table-column prop="OrgID_Name" label="所属机构">
							</el-table-column>
							<el-table-column prop="Mobile" label="电话">
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<div slot="footer" class="dialog-footer">
					<el-button @click="innerVisible = false">取 消</el-button>
					<el-button type="primary" @click="onChangeInfo">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog title="部门信息" :visible.sync="dlg_dep">
				<el-form :model="frm_dep">
					<el-row>
						<el-col :span="12">
							<el-form-item label="部门名称" :label-width="frm_lbl_w">
								<el-input ref="OrgName2" v-model="frm_dep.OrgName" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="部门类型" :label-width="frm_lbl_w">
								<el-select v-model="frm_dep.DepartmentType" placeholder="请选择部门类型">
									<el-option label="行政类" value="0"></el-option>
									<el-option label="学部" value="1"></el-option>
									<el-option label="食堂" value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="所属学段" :label-width="frm_lbl_w">
								<el-select v-model="frm_dep.LearningStageID" placeholder="请选择活动区域">
									<el-option label="请选择" value="0"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="负责人" :label-width="frm_lbl_w">
								<el-input placeholder="请选择负责人" readonly style="width: 260px;"
									v-model="frm_dep.Responsibler_ShowText">
									<el-button slot="append" icon="el-icon-search" @click="innerVisible = true">
									</el-button>
								</el-input>
							</el-form-item>
							<el-form-item label="部门电话" :label-width="frm_lbl_w">
								<el-input v-model="frm_dep.Telephone" style="width: 260px;" autocomplete="off">
								</el-input>
							</el-form-item>
							<el-form-item label="传真" :label-width="frm_lbl_w">
								<el-input v-model="frm_dep.Fax" style="width: 260px;" autocomplete="off"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dlg_dep = false">取 消</el-button>
					<el-button type="primary" @click="addOrgInfo(1)">确 定</el-button>
				</div>
			</el-dialog>

		</div>
	</div>
</template>
<script>
	import {
		get,
		post
	} from "/common/apiconfig"
	let rowChangeInfo = {};
	export default {
		data() {
			return {
				treeData: [],
				items: [],
				ParentID: 0,
				currentRow: null,
				tableData: [],
				defaultProps: {
					children: 'children',
					label: 'Name'
				},
				blnFormEdit: false,
				innerVisible: false,
				frm_org: {},
				frm_dep: {},
				dlg_org: false,
				dlg_dep: false,
				frm_lbl_w: "120px"
			};
		},
		mounted: function() {
			// 调用树结构函数
			this.getTreeData();
			// 获取初始用户数据
			this.onGetUserList({})
		},
		methods: {
			// 递归获取结构树数据
			getTreeData() {
				get('/GetTreeList?TreeType=OrgDepartment').then((d) => {
					this.items = d.data.items;
					this.treeData = this.items.filter(it => it.ID == 0);
					this.treeData.forEach(item => {
						let tmp = this.items.filter(it => it.ParentID == item.ID);
						item.children = tmp;
						tmp.forEach(item2 => {
							let tmp2 = this.items.filter(it2 => it2.ParentID == item2.ID);
							item2.children = tmp2;
							tmp2.forEach(item3 => {
								let tmp3 = this.items.filter(it3 => it3.ParentID == item3
									.ID);
								item3.children = tmp3;
							})
						})
					})
				})
			},
			// 获得树节点对应ID值和对象
			getCurTreeNode(data) {
				this.ParentID = data.ID;
				this.currentRow = data;
			},
			// 增加机构或部门
			addOrg(t) {
				if (!t) {
					this.frm_org = {
							Address: "",
							EnglishName: "",
							OrgLevelType: "0",
							OrgName: "",
							PurchasePriceType: "1",
							Responsibler: "",
							Responsibler_ShowText: "",
							Telephone: "",
							Type: "0",
							ZipCode: "",
						},
						this.dlg_org = true;
				} else {
					this.frm_dep = {
							DepartmentType: "0",
							Fax: "",
							LearningStageID: "0",
							OrgName: "",
							Responsibler: "",
							Responsibler_ShowText: "",
							Telephone: "",
							Type: "1"
						},
						this.dlg_dep = true;
				}
				this.blnFormEdit = false;
			},
			// 增加或更新机构数据
			addOrgInfo(t) {
				if (!t) {
					if (this.frm_org.OrgName === '') {
						this.$refs.OrgName.focus();
						return false
					}
				} else {
					if (this.frm_dep.OrgName === '') {
						this.$refs.OrgName2.focus();
						return false
					}
				}
				let that = this;
				let arr = []
				if (this.blnFormEdit) {
					if (!t) {
						this.frm_org.ID = this.currentRow.ID;
						arr = this.frm_org;
					} else {
						this.frm_dep.ID = this.currentRow.ID;
						arr = this.frm_dep
					}
					console.log(arr);
					post('/OrgUpdate',
						arr).then(d => {
						if (d.code == "001") {
							that.$message({
								message: '更新成功！',
								type: 'success'
							})
							this.getTreeData();
							if (!t) {
								that.dlg_org = false
							} else {
								that.dlg_dep = false
							}
						} else {
							that.$message.error('更新出错！');
						}
					})
				} else {
					if (!t) {
						this.frm_org.ParentID = this.ParentID
						arr = this.frm_org;
					} else {
						this.frm_dep.ParentID = this.ParentID
						arr = this.frm_dep
					}
					console.log(arr);
					post('/OrgNew',
						arr).then(d => {
						if (d.code == "001") {
							that.$message({
								message: '增加成功！',
								type: 'success'
							})
							this.getTreeData();
							if (!t) {
								that.dlg_org = false
							} else {
								that.dlg_dep = false
							}
						} else {
							that.$message.error('增加出错！');
						}
					})
				}
			},
			// 根据所选编辑机构和部门
			editOrg() {
				if (!this.currentRow) {
					this.$message.error('请选择一条记录！');
				} else {
					let _curTmpObj = this.currentRow;
					if (!_curTmpObj.Type) {
						this.dlg_org = true;
						get('/OrgInfo?ID=' + _curTmpObj.ID).then(d => {
							this.frm_org = {
								Address: d.data.Address,
								EnglishName: d.data.EnglishName,
								OrgLevelType: d.data.OrgLevelType.toString(),
								OrgName: d.data.OrgName,
								PurchasePriceType: d.data.PurchasePriceType,
								Responsibler: d.data.Responsibler,
								Responsibler_ShowText: d.data.Responsibler_Name,
								Telephone: d.data.Telephone,
								Type: d.data.Type,
								ZipCode: d.data.ZipCode,
							};
						})
					} else {
						this.dlg_dep = true;
						get('/OrgInfo?ID=' + _curTmpObj.ID).then(d => {
							this.frm_dep = {
								OrgName: d.data.OrgName,
								Responsibler: d.data.Responsibler,
								Responsibler_ShowText: d.data.Responsibler_Name,
								Telephone: d.data.Telephone,
								Type: d.data.Type,
							};
						})
					}
					this.blnFormEdit = true;
				}
			},
			// 根据所选择机构和部门ID删除对应数据
			delOrg() {
				if (!this.currentRow) {
					this.$message.error('请选择一条记录！');
				} else {
					let _curTmpObj = this.currentRow;
					let that = this;
					this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						post('/OrgDelete', {
							ID: _curTmpObj.ID
						}).then(d => {
							if (d.code == "001") {
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.getTreeData();
							} else {
								that.$message.error('删除出错！');
							}
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			// 获取对应用户数据
			onGetUserList(_data) {
				get('/UserList', _data).then(d => {
					this.tableData = d.rows;
				})
			},
			// 点击树状节点获取用户数据
			handleNodeClick(data) {
				let _data = {
					_search: false,
					rows: 20,
					page: 1,
					sord: "desc",
					VjTreeID: data.ID,
					VjTreeType: data.Type,
					VjTreeVar: "Department",
					VjTreeParentID: data.ParentID
				}
				this.onGetUserList(_data);
			},
			onRowClick(row) {
				rowChangeInfo.Responsibler = row.ID
				rowChangeInfo.Responsibler_ShowText = row.UserName;
			},
			onChangeInfo() {
				this.innerVisible = false;
				let _curTmpObj = this.currentRow;
				if (!_curTmpObj.Type) {
					this.frm_org.Responsibler = rowChangeInfo.Responsibler;
					this.frm_org.Responsibler_ShowText = rowChangeInfo.Responsibler_ShowText;
				} else {
					this.frm_dep.Responsibler = rowChangeInfo.Responsibler;
					this.frm_dep.Responsibler_ShowText = rowChangeInfo.Responsibler_ShowText;
				}
			}
		}
	}
</script>

<style scoped>
	.body {
		border: solid 1px #E9E9E9;
		border-radius: 8px 8px 0 0;
		background-color: #fff;
	}

	.navs {
		padding: 10px;
		border-radius: 8px 8px 0 0;
		background-color: #F9F9F9;
		margin-bottom: 10px;
		border-bottom: solid 1px #E9E9E9;
	}

	.title {
		font-size: 15px;
		font-weight: 700;
		padding-top: 3px;
	}

	.btns {
		display: flex;
		justify-content: flex-end;
	}

	.content {
		margin: 20px;
	}

	.el-table {
		border: solid 1px #E9E9E9;
	}

	.rowbg {
		background-color: #F0F2F5;
	}
</style>
